<template>
    <div class="data-view">
        <el-card>
            <div id="main" style="width:100%;height:450px;"></div>
        </el-card>
    </div>
</template>

<script>
export default {
    name: 'DataView',
    props: ['isChanged'],
    watch: {
        isChanged: function () {
            this.drawChart()
        }
    },
    methods: {
        drawChart() {
            var chartDom = document.getElementById('main');
            var myChart = this.$echarts.init(chartDom);
            var option;
            const data = this.$store.state.dataList
            myChart
            myChart.setOption(
                (option = {
                    title: {
                        text: '大气相干长度',
                        left: '1%'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: '5%',
                        right: '15%',
                        bottom: '10%'
                    },
                    xAxis: {
                        data: data.map(function (item) {
                            return item.date;
                        })
                    },
                    yAxis: {},
                    toolbox: {
                        right: 10,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    dataZoom: [
                        {
                            startValue: '2021/6/25'
                        },
                        {
                            type: 'inside'
                        }
                    ],
                    visualMap: {
                        top: 50,
                        right: 10,
                        pieces: [
                            {
                                gt: 0,
                                lte: 10,
                                color: '#93CE07'
                            },
                            {
                                gt: 10,
                                lte: 20,
                                color: '#FBDB0F'
                            },
                            {
                                gt: 20,
                                lte: 30,
                                color: '#FC7D02'
                            },
                            {
                                gt: 30,
                                lte: 40,
                                color: '#FD0100'
                            },
                            {
                                gt: 40,
                                lte: 50,
                                color: '#AA069F'
                            },
                            {
                                gt: 50,
                                color: '#AC3B2A'
                            }
                        ],
                        outOfRange: {
                            color: '#999'
                        }
                    },
                    series: {
                        name: '三沙 r0',
                        type: 'line',
                        data: data.map(function (item) {
                            return item.r0;
                        }),
                        markLine: {
                            silent: true,
                            lineStyle: {
                                color: '#333'
                            },
                            data: [
                                {
                                    yAxis: 5
                                },
                                {
                                    yAxis: 10
                                },
                                {
                                    yAxis: 15
                                },
                                {
                                    yAxis: 20
                                },
                                {
                                    yAxis: 40
                                }
                            ]
                        }
                    }
                })
            );

            option && myChart.setOption(option);

        },

    },
}
</script>

<style lang="scss" scoped>
.data-view {
    .el-card {
        height: 500px;
        margin-left: 20px;
        margin-top: 20px;
        margin-bottom: 0px;
    }
}
</style>